<template>
  <div>
    <div class="control">
      <Button type="primary" @click="add">添加</Button>
    </div>
    <Table :columns="tableColumns" :data="tableData" :border="true">
      <template slot="action" slot-scope="{ row, index }">
        <Button type="primary" @click="edit(row)">编辑</Button>
        <Button type="warning" @click="bind(row)">绑定权限</Button>
        <Button type="error" @click="del(rwo)">删除</Button>
      </template>
    </Table>

    <Modal v-model="modal"
           title="添加/编辑"
           :draggable="false">
      <div slot="footer">
        <Button @click="modal = false">取消</Button>
        <Button type="primary" @click="handlerSubmit">确定</Button>
      </div>
      <Form ref="editForm" :model="editForm" :rules="formRules" :label-width="80">
        <FormItem label="角色名称" prop="name">
          <Input v-model="editForm.name"></Input>
        </FormItem>
        <FormItem label="描述" prop="desc">
          <Input v-model="editForm.desc"></Input>
        </FormItem>
      </Form>
    </Modal>

    <Modal v-model="menuModal"
           title="菜单行为列表"
           :draggable="false">
      <div slot="footer">
        <Button @click="menuModal = false">关闭</Button>
        <Button type="primary" @click="handlerBindSubmit">确定</Button>
      </div>
      <div class="margin-bottom flex">
        <Input v-model="searchText" placeholder="请输入要搜索的内容"></Input>
        <Button type="primary" @click="searchMenuData">搜索</Button>
      </div>
      <Table row-key="id" :columns="menuTableColumns" :data="menuTableData" border
             @on-select="onSelect"
             @on-select-cancel="onSelect"
             @on-select-all="onSelect"
             @on-select-all-cancel="onSelect">
      </Table>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "role",
    layout: 'frame_admin',
    data() {
      return {
        tableColumns: [
          {title: 'ID', key: 'id'},
          {title: '角色名称', key: 'name'},
          {title: '角色描述', key: 'desc'},
          {title: '操作', slot: 'action'}
        ],
        tableData: [],
        modal: false,
        editForm: {
          name: '',
          desc: ''
        },
        formRules: {
          name: [
            {required: true, message: '请填写角色名称', trigger: 'blur'}
          ],
        },

        menuModal: false,
        menuTableColumns: [
          {type: 'selection', width: 60, align: 'center'},
          {title: 'ID', key: 'id', tree: true, align: 'center'},
          {title: '菜单名称', key: 'name'},
          {title: 'key', key: 'key'}
        ],
        menuTableData: [],
        currentData: '',
        searchText: '',
        selection: [],
      }
    },
    mounted() {
      this.loadData();
    },
    methods: {
      loadData() {
        const that = this;
        this.$axios.get('admin/role/list').then(res => {
          that.tableData = res.data;
        })
      },
      handlerSubmit() {
        const that = this;
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            that.$Spin.show();
            that.$axios.post('admin/role/edit', that.editForm).then(res => {
              that.$Spin.hide();
              that.loadData();
            })
            that.modal = false;
          }
        })
      },
      handlerBindSubmit() {
        const that = this;
        this.$axios.post('admin/role/bind', {
          id: this.currentData,
          menu_ids: this.selection.join(',')
        }).then(res=>{
          that.menuModal = false;
        })
      },
      add() {
        this.editForm = {};
        this.modal = true;
      },
      edit(row){
        this.editForm = row;
        this.modal = true;
      },
      del(row){
        const that = this;
        this.$Modal.confirm({
          title: '确认删除？',
          content: '此操作不可逆，是否确认删除当前这条数据',
          onOk: () => {
            that.$axios.post('admin/role/del',{id:row.id}).then(res=>{
              if (res.code === 0){
                that.$Message.success('删除成功');
                that.loadData();
              }
            })
          }
        });
      },
      bind(row) {
        this.menuModal = true;
        this.currentData = row.id;
        if (row.menu_group_ids) {
          this.selection = row.menu_group_ids.split(',');
        } else {
          this.selection = [];
        }
        this.searchMenuData();
      },
      searchMenuData() {
        const that = this;
        this.$axios.get('admin/role/searchMenu', {params: {text: this.searchText}}).then(res => {
          that.menuTableData = res.data;
          that.menuTableData.forEach(menu => {
            for (const s of that.selection) {
              if (menu.id == s) {
                menu._checked = true;
              }
            }
            if (menu.children) {
              menu.children.forEach(menu2 => {
                for (const s of that.selection) {
                  if (menu2.id == s) {
                    menu2._checked = true;
                  }
                }
              })
            }
          })
        })
      },
      onSelect(selection, row) {
        const selectedIds = []
        selection.forEach(item => {
          selectedIds.push(item.id);
        })
        this.selection = selectedIds;
      },
    }
  }
</script>

<style scoped>

</style>